<template>
  <div>
    <div class="box" @load="onLoad">
      <van-swipe class="my-swipe" :autoplay="90000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in books"
          :key="item.id"
          v-if="index < 6"
        >
          <img :src="item.src" width="200px" height="180px" />
          <div>
            <h3>{{ item.name }}</h3>
            <span>{{ item.master }}</span>
            <p>详情描述：{{ item.intro | textSubstr }}</p>
            <button
              @click="addBook(item)"
              class="bn1"
              :class="{ bn1: true, added: isAdded(item) }"
            >
              {{ isAdded(item) ? "已添加" : "加入书架" }}
            </button>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="box2">
            <img
              src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/推荐/u161.png"
            />
            <span>没有了</span>
            <button @click="goBookStore" class="bn2">去书城转转</button>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { getBooksApi } from "@/api/booksApi";

export default {
  data() {
    return {
      books: [],
    };
  },
  methods: {
    // 点击按钮，加入书架
    addBook(item) {
      // 如果store中的state的用户的登录信息中无token，跳转登录页面；否则就直接添加书架
      if (!this.$store.state.user.userLogin.token) {
        this.$router.push("/login");
      } else {
        const book = item;
        let bookshelf = this.$store.state.bookshelf;

        // 检查书架中是否已存在相同的图书
        const hasSameBook = bookshelf.some((item) => item.id === book.id);
        if (hasSameBook) {
          console.log("该图书已存在于书架中");
          return; // 不进行添加操作
        }

        this.$store.dispatch("addBookToShelf", book);
        // console.log(bookshelf)
      }
    },

    // 判断是否已加入书架，进行按钮样式改变
    isAdded(item) {
      const bookshelf = this.$store.state.bookshelf;
      // 返回布尔值 ，每次点击按钮就进行判断/进入时判断
      return bookshelf.some((book) => book.id === item.id);
    },

    // 获取图书列表
    async onLoad() {
      try {
        const booksList = await getBooksApi();
        this.books = [...booksList];
        // console.log(this.books)
      } catch (error) {
        console.error("加载失败", error);
      }
    },
    // 路由跳转，进入书城
    goBookStore() {
      this.$router.replace("/bookCity");
    },
  },
  // 挂载完成，执行onLoad()方法
  mounted() {
    this.onLoad();
  },
};
</script>

<style lang="scss" scoped>
@mixin import-text {
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
}
@mixin import-bn {
  width: 150px;
  height: 40px;
  border: 0px;
  border-radius: 150px;
  font-size: 16px;
  background-color: rgb(43, 178, 131);
  color: white;
}

div {
  margin: 0;
  padding: 0;
  height: 600px;
  .box {
    margin-top: -20px;
    background-color: rgba(242, 242, 242, 1);
    overflow: hidden;
    .my-swipe {
      @include import-text;
      width: 85%;
      height: 520px;
      // background-color: white;
      margin: auto;
      margin-top: 20px;
      .van-swipe-item {
        // @include import-text;
        overflow: hidden;
        img {
          margin-top: 30px;
          font-size: 0;
        }
        div {
          margin: 0;
          padding: 0;
          overflow: hidden;
          h3 {
            font-weight: 400px;
            line-height: 18px;
            font-size: 18px;
            margin-top: 15px;
            margin-bottom: 10px;
            color: #333333;
          }
          span {
            line-height: 15px;
            font-size: 15px;
            color: #cccccc;
          }
          p {
            margin-top: 40px;
            margin-left: 15px;
            margin-right: 15px;
            font-size: 17px;
            line-height: 24px;
            text-align: justify;
            color: #a1a1a1;
          }
          .bn1 {
            @include import-bn;
            position: relative;
            top: 45px;
            bottom: 5px;
          }
          .added {
            background-color: gray; /* 添加后的按钮颜色 */
            cursor: not-allowed; /* 鼠标指针样式 */
          }
        }
      }
      .box2 {
        background-color: white;
        overflow: hidden;
        img {
          position: absolute;
          left: 120px;
          top: 150px;
          width: 80px;
          height: 68px;
        }
        span {
          font-weight: 400;
          font-style: normal;
          font-size: 18px;
          color: #cccccc;
          text-align: center;
          position: relative;
          top: 250px;
          left: 75px;
        }
        .bn2 {
          @include import-bn;
          position: relative;
          top: 429px;
          left: -20px;
        }
      }
    }
  }
}
</style>
